<template>
 <div class="fau">
  <el-col :span="7" v-for="item in phenos" :key="item.uuid" class="card">
          <router-link :to="`/faultmodel/${item.uuid}/${item.pheno}`">
            <el-card shadow="hover">
            {{ item.pheno }}
            </el-card>
          </router-link>
        </el-col>
 </div>
</template>

<script>
export default {
  name: '',
  props: {
    fauDes: {
      type: String,
      default: ''
    }
  },
  components: {

  },
  data () {
    return {
      phenos: []
    }
  },
  methods: {
    async getData () {
      const a = JSON.stringify({ type: this.fauDes, carType: localStorage.getItem('type') })
      const res = await this.$api.post('/getRootFault', a)
      this.phenos = res.data
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style scoped lang='scss'>
.fau{
  text-align: center;
}
.card:nth-child(3n-2){
      margin-left: 90px;
    }
    .card{
      margin: 15px;
      font-size: 1.7rem;
      .el-card{
        height: 8rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
</style>
